<template>
	<view class="container">
		<cover-view class="mask" @tap="hideComment" :style="isShow ? 'display:block' : 'display:none'"></cover-view>
		<navBack :style="isShow ? 'display:none' : ''"></navBack>
		<view class="videoTitle" :style="isShow ? 'display:none' : ''">{{videoTitle}}</view>
		
		<image :src="videoType == 1 ? videoDataInfo.avatarUrl : videoDataInfo.cover" class="backgroundImage"></image>
		
		<view class="videoControl">
			<video :src="videoUrl" autoplay objectFit="fill" :title="videoTitle"
			enable-play-gesture play-btn-position="center"
			class="" :style="isShow ? 'position: absolute; top: 0;' : ''">
				<!-- <cover-view>中间点击播放/暂停按钮</cover-view> -->
			</video>
		</view>
		
		
		<view class="bottom" :style="isShow ? 'display:none' : ''">
			<view class="user">
				<view class="userInfo">
					<image :src="videoType == 1 ? videoDataInfo.creator.avatarUrl : videoDataInfo.cover"></image>
					<view class="userName">{{videoType == 1 ? videoDataInfo.creator.nickname : videoDataInfo.artistName}}</view>
				</view>
				<view class="des" v-if="videoDataInfo.description">{{videoType == 1 ? videoDataInfo.description :videoDataInfo.name}}</view>
				<view class="des" v-else>{{videoDataInfo.title}}</view>
			</view>
			<view class="iconfontBtn">
				<view class="comment likeCount">
					<text class="iconfont icon-dianzan-copy"></text>
					<view class="count">{{videoType == 1 ? videoDataInfo.praisedCount : videoDataInfo.likeCount}}</view>
				</view>
				<view class="comment commentCount" @tap="showComment">
					<text class="iconfont icon-pinglun1"></text>
					<view class="count">{{videoDataInfo.commentCount}}</view>
				</view>
				<view class="comment shareCount">
					<text class="iconfont icon-fenxiangjiantouxianxing"></text>
					<view class="count">{{videoDataInfo.shareCount}}</view>
				</view>
			</view>
		</view>
		<!-- 弹出评论区 -->
		<view class="commentArea" v-if="isShow">
			<view class="header">
				<view class="title">评论({{totalCount}})</view>
				<!-- 评论排序 方式 -->
				<view class="sortType"></view>
			</view>
			<scroll-view scroll-y class="commentScroll">
				<view class="scrollItem" v-for="item in commentData" :key="item.commentId">
					<view class="top">
						<image :src="item.user.avatarUrl"></image>
						<view class="userInfo">
							<text class="nickName">{{item.user.nickname}}</text>
							<text class="replyTime">{{item.time}}</text>
						</view>
						<view class="likeCount">
							<text>{{item.likedCount}}</text>
							<text class="iconfont icon-dianzan-copy"></text>
						</view>
					</view>
					<view class="center">{{item.content}}</view>
					<view class="bot">{{item.showFloorComment.replyCount}}条回复 > </view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import navBack from '../../components/navBack/navBack'
	import commentArea from '../../components/commentArea/commentArea'
	export default {
		data() {
			return {
				videoDataInfo:{},// 对应视频/MVID的视频信息
				videoUrl:'', // 视频/MV链接
				videoType:'', // 用于标识MV还是视频
				videoTitle:'',// 视频标题
				isShow: false, // 用于显示隐藏评论区
				commentData:[], // 获取到的评论数据
				totalCount:'', // 评论数
				commentTime:'', // 用户评论时间
			}
		},
		components:{navBack,commentArea},
		onLoad(options) {
			
			// videoType = 0 是MV =1 是视频
			this.videoId = options.videoId
			this.videoType = options.videoType
			
			console.log(this.videoId);
			
			this.videoDataInfo = {}
			this.videoUrl = ''
			
			this.getVideoInfo(this.videoId,this.videoType)
			this.getVideoPlay(this.videoId,this.videoType)
		},
		methods: {
			// 获取对应视频ID的信息
			async getVideoInfo(videoId,videoType){
				if(videoType == 1){
					const video = await this.$myRequest('/video/detail',{id:videoId})
					this.videoDataInfo = video.data
					// 动态修改当前页面的窗口标题
					this.videoTitle = this.videoDataInfo.title
					// uni.setNavigationBarTitle({
					// 	title: this.videoDataInfo.title
					// })
				}else {
					const mv = await this.$myRequest('/mv/detail',{mvid:videoId})
					this.videoDataInfo = mv.data
				
					this.videoTitle = this.videoDataInfo.name
				}
				
			},
			// 获取视频/MV链接
			async getVideoPlay(videoId,videoType){
			
				if(videoType == 1){
					const video = await this.$myRequest('/video/url?id=' + videoId)
					this.videoUrl = video.urls[0].url
				}else {
					const mv = await this.$myRequest('/mv/url?id=' + videoId)
					this.videoUrl = mv.data.url
				}
			},
			// 点击评论弹出评论信息
			showComment(){
				this.isShow = true
				this.getCommentData(this.videoId,this.videoType)
			},
			// 点击收起评论
			hideComment(){
				this.isShow = false
			},
			async getCommentData(videoId,videoType){
				/*if(videoType == 1){
					const comment = await this.$myRequest('/comment/video?id=' + videoId)
					this.commentData = comment
					console.log(comment,'aa');
				}else {
					const comment = await this.$myRequest('/comment/mv?id=' + videoId)
					this.commentData = comment
					console.log(comment);
				}*/
				// 判断资源类型：歌曲 mv 歌单 电台
				if(videoType == 1) { 
					this.resourceType = 5 
				}else {
					this.resourceType = 1
				}
				/**
				 * 必选参数 :
				 * id : 资源 id, 如歌曲 id,mv id
				 * type: 数字 , 资源类型 , 对应歌曲 , mv, 专辑 , 歌单 , 电台, 视频对应以下类型
				 * 0: 歌曲 1: mv 2: 歌单 3: 专辑 4: 电台 5: 视频 6: 动态
				 * 可选参数 :
				 * pageNo:分页参数,第N页,默认为1
				 * pageSize:分页参数,每页多少条数据,默认20
				 * sortType: 排序方式,1:按推荐排序,2:按热度排序,3:按时间排序
				 * cursor: 当sortType为3时且页数不是第一页时需传入,值为上一条数据的time*/
				const comment = await this.$myRequest('/comment/new',
				{ id:videoId, pageSize: 10, pageNo: 1, sortType: 2, type: this.resourceType})
				this.commentData = comment.data.comments
				this.totalCount = comment.data.totalCount
				let moment = require('moment')
				this.commentData.forEach(item => { // 处理时间
					item.time = moment(item.time).format('yyyy年M月d日')
				})
				console.log(comment);
			}
			
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.container {
		position: relative;
		height: 100%;
		display: flex;		
		flex-direction: column;	// flex布局 纵向	
		align-items: center;
		.mask {
			width: 100%;
			height: 500rpx;
			z-index: 99;
		}
		.videoTitle {
			font-size: 36rpx;
			padding-top: 75rpx;
			color: #fff;
			max-width: 250rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.backgroundImage {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -99;
			width: 100%;
			height: 100%;
			filter: blur(80px);
		}
		// 视频样式
		.videoControl {
			video {
				position: absolute;
				top: 300rpx;
				left: 0;
				width: 100%;
				height: 500rpx;
			}
		}
		.bottom {
			position: absolute;
			bottom: 0rpx;
			left: 0;
			width: 100%;
			// 用户样式
			.user {
				position: absolute;
				bottom: 100rpx;
				left: 0;
				padding-left: 20rpx;
				color: #fff;
				.userInfo {
					display: flex;
					align-items: center; //子元素垂直居中
					// justify-content: center;//子元素水平居中
					margin-bottom: 10rpx;
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						vertical-align: middle;
					}
					.userName {
						margin-left: 10rpx;
					}
				}
				.des {
				}
			}
			// 右侧图标按钮样式
			.iconfontBtn {
				position: absolute;
				display: flex;
				flex-direction: column;
				bottom: 20rpx;
				right: 0;
				color: #fff;
				padding: 0 20rpx;
				margin: 10rpx;
				.comment {
					margin-bottom: 30rpx;
					text-align: center;
					padding: 10rpx;
					.iconfont {
						font-size: 50rpx;
						text-align: center;
					}
					.count {
						font-size: 20rpx;
					}
				}
				
			}
		}
		// 评论区样式
		.commentArea {
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 0 10rpx;
			// height: calc(100vh - 500rpx);
			width: 100%;
			background-color: #fff;
			z-index: 9999;
			// 动画效果
			animation:commentScroll 0.3s;
			@-webkit-keyframes commentScroll
			{
			from {height: 0rpx;}
			to {
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 565rpx);
				/* #endif */
				/* #ifdef H5 */
				height: calc(100vh - 560rpx);
				/* #endif */
				}
			}
			
			.header {
				margin-bottom: 10rpx;
				.title {
					padding: 10rpx 0;
				}
				.sortType {}
			}
			// 评论区内容
			.commentScroll {
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 565rpx);
				/* #endif */
				/* #ifdef H5 */
				height: calc(100vh - 560rpx);
				/* #endif */
				.scrollItem {
					margin-bottom: 10rpx;
					.top {
						// 纵向排列
						position: relative;
						display: flex;
						margin-bottom: 20rpx;
						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
						.userInfo {
							display: flex;
							// 改变flex布局 纵向排列
							flex-direction: column;
							margin-left: 20rpx;
							height: 40rpx;
							line-height: 40rpx;
							
							.nickName {
								color: #606060;
							}
							.replyTime {
								font-size: 26rpx;
								color: #aaa;
							}
						}
						.likeCount {
							position: absolute;
							right: 0;
							top: 0;
							color: #aaa;
							font-size: 26rpx;
							
							.iconfont {
								margin: 10rpx;
								width: 80rpx;
								height: 80rpx;
								line-height: 80rpx;
								font-size: 35rpx;
							}	
						}
						
					}
					.center {
						color: #333333;
						font-weight: bolder;
						padding: 0 100rpx;
					}
					.bot {
						font-size: 26rpx;
						color: #6b89b0;
						padding: 5rpx 100rpx;
					}
				}
			}
		}
	}
</style>
